<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://www.51xuecheng.cn/static/img/asset-favicon.ico">
    <title>个人中心</title>
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/plugins/normalize-css/normalize.css" />
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/plugins/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/css/page-learing-personal.css" />
</head>

<body>
<!-- 页面头部 -->
<!--#include virtual="/include/header.html"-->
    <div class="personal-header" style="background-image: url(http://www.51xuecheng.cn/static/img/asset-banner.png);">
        <!--<div class="personal-info">-->
        <!--<p><h1>吴雪</h1></p>-->
        <!--<p>Web前端工程师 学习时长 48小时35分</p>-->
        <!--</div>-->
        <!--<div class="container">-->
        <!--<div class="col-lg-2"><img src="http://www.51xuecheng.cn/static/img/logoIco.png" alt=""></div>-->
        <!--<div class="col-lg-4 title text-left">学习中心</div>-->
        <!--<div class="col-lg-6 text-right"><input type="text" class="input-search" placeholder="输入查询关键词"><input type="submit" class="search-buttom"></div>-->
        <!--</div>-->
    </div>
    <!-- 页面 -->
    <div class="container">
        <div class="personal-nav pull-left">
            <div class="nav nav-stacked text-left">
                <div class="title">个人中心</div>
                <div class="my-ico">
                    <img src="http://www.51xuecheng.cn/static/img/asset-myimg.jpg" alt="">
                    <p>梦醒时分</p>
                </div>
                <div class="item">
                   <!--#include virtual="/include/ucenter_menu.html"-->
                </div>
            </div>
        </div>
        <div class="personal-content pull-right" id="learningcenterApp">
            <div class="personal-cont">
                <div class="top">
                    <div class="tit"><span>最近学习课程</span></div>

                    <div class="top-cont">
                        <div class="col-lg-8">
                            <div class="imgIco"><img src="http://www.51xuecheng.cn/static/img/asset-timg.png" width="60" height="28" alt=""></div>
                            <div class="title"><span class="lab">继续学习</span> 程序语言设计 <span class="status">学习中</span></div>
                            <div class="about"><span class="lab">正在学习</span> 使用对象 <span class="data">有效日期: 2017.06.05 - 2018.06.05</span></div>
                            <div class="rate">
                                <li class="active"></li>
                                <li></li>
                                <li></li>
                                <li></li><span>1/4 已完成部分</span> <span>进度25%</span></div>
                        </div>
                        <div class="division"></div>
                        <div class="col-lg-4 text-right">
                            <a href="#" class="goLear"> 继续学习</a>
                            <a href="#" class="evalu"> 课程评价</a>
                            <div class="aft" style="top:0px;right:0px;">● ● ●
                                <ul></ul>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="my-course">
                    <div class="title">
                        <div class="lab-title">全部课表</div>
                        <div class="tit-Item"><span><em  @click="sort(1)">按学习时间进行排序</em> <em @click="sort(2)">按加入时间进行排序</em></span><span><em @click="showall()">全部</em><em @click="showCourseType('700002')">付费</em><em @click="showExpiresType('1')">即将过期</em><em  @click="showExpiresType('2')">失效</em></span></div>
                    </div>
                    <div class="cont">
                        <div class="col-lg-6" v-for="course in mycourseTables">
                            <div class="item">
                                <div class="imgIco"><img src="http://www.51xuecheng.cn/static/img/asset-timg.png" width="60" height="28" alt=""></div>
                                <div class="title"><span class="lab">继续学习</span> {{course.courseName}} 
                                    <div class="aft">● ● ●
                                        <ul></ul>
                                    </div>
                                </div>
                                <div class="about"><span class="lab">正在学习</span> {{course.teachplanName}} </div>
                                <div class="time">有效日期: {{course.validtimeStart}} - {{course.validtimeEnd}}</div>
                                <div class="rate">
                                    <li class="active"></li>
                                    <li></li>
                                    <li></li>
                                    <li></li><span>1/4 已完成部分 <em>进度 25%</em></span></div>
                                <div class="parting"></div>
                                <div class="butItem text-center" v-if="course.teachplanId"><a :href="'http://www.51xuecheng.cn/course/learning.html?id='+course.courseId+'&chapter='+course.teachplanId" class="golearing" target="_blank">继续学习</a> <a href="#" class="classcom">课程评价</a></div>
                                <div class="butItem text-center" v-else><a :href="'http://www.51xuecheng.cn/course/learning.html?id='+course.courseId" class="golearing" target="_blank">继续学习</a> <a href="#" class="classcom">课程评价</a></div>
                            </div>
                        </div>
                        
                        
                    
                        <div class="clearfix"></div>
                        <div class="help"><span class="">帮助和常见问题 ></span><span class="">问题反馈 ></span></div>
                    </div>
                </div>
                <div id="listcont">
                    <li><a href="#">课程成绩</a></li>
                    <li><a href="#">联系老师</a></li>
                    <li><a href="#">课程延期</a></li>
                    <li><a href="#">退出课程</a></li>
                </div>
            </div>
        </div>
    </div>
    <!--底部版权-->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-7">
                    <div>
                        <!--<h1 style="display: inline-block">学成网</h1>--><img src="http://www.51xuecheng.cn/static/img/asset-logoIco.png" alt=""></div>
                    <div>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。</div>
                    <div>© 2022年</div>
                    <input type="button" class="btn btn-primary" value="下 载" />
                </div>
                <div class="col-md-5 row">
                    <dl class="col-md-4">
                        <dt>关于学成在线</dt>
                        <dd>关于</dd>
                        <dd>管理团队</dd>
                        <dd>工作机会</dd>
                        <dd>客户服务</dd>
                        <dd>帮助</dd>
                    </dl>
                    <dl class="col-md-4">
                        <dt>新手指南</dt>
                        <dd>如何注册</dd>
                        <dd>如何选课</dd>
                        <dd>如何拿到毕业证</dd>
                        <dd>学分是什么</dd>
                        <dd>考试未通过怎么办</dd>
                    </dl>
                    <dl class="col-md-4">
                        <dt>合作伙伴</dt>
                        <dd>合作机构</dd>
                        <dd>合作导师</dd>
                    </dl>
                </div>
            </div>
        </div>
    </footer>

    <!-- 页面 css js -->
    <script type="text/javascript" src="http://www.51xuecheng.cn/static/plugins/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="http://www.51xuecheng.cn/static/plugins/bootstrap/dist/js/bootstrap.js"></script>
    <script>
        $(function() {
            $('.aft').hover(function() {
                if (!$(this).hasClass('ac')) {
                    $(this).find('ul').html($('#listcont').html())
                    $(this).addClass('ac')
                } else {
                    $(this).find('ul').text('')
                    $(this).removeClass('ac')
                }
            })
        })


        $(function() {
            $(window).scroll(function() {
                console.log($(this)[0].scrollY)
                if ($(this)[0].scrollY > 235) {
                    $('.personal-nav').css({
                        'position': 'fixed',
                        'top': 10
                    });
                } else if ($(this)[0].scrollY <= 155) {
                    $('.personal-nav').css({
                        'position': 'relative',
                        'top': -70
                    });
                };
            })
        })

    /*我的课程表*/
    const myCourseTablesFun = (params) => {
        return  requestGet('/api/learning/mycoursetable',params);
    }
    var learningcenterVm= new Vue({   
        el: "#learningcenterApp", 
        data: {
            params:{
                courseType:'',
                sortType:'',
                expiresType:''
            },
            mycourseTables:[]
        },
         methods: {
            sort(type){
               this.params.sortType = type
               this.myCourseTables()
            },
            showCourseType(type){
               this.params.courseType = type
               this.myCourseTables()
            }
            ,
            showExpiresType(type){
               this.params.expiresType = type
               this.myCourseTables()
            },
            showall(){
                this.params.courseType = ''
                this.params.expiresType = ''
                this.myCourseTables()
            },
            myCourseTables(){
                myCourseTablesFun(this.params).then(res=>{
                   this.mycourseTables=res.items
               })
            }
         },
         created() {
            this.myCourseTables()
         },
         mounted(){

          }
       })
    </script>



</body>